{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The `Selection` Widgets\n",
    "\n",
    "+ Dropdown\n",
    "+ RadioButtons\n",
    "+ ToggleButtons\n",
    "+ Select\n",
    "+ SelectMultiple\n",
    "+ SelectionSlider\n",
    "+ SelectionRangeSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "These widgets can be used to choose between multiple alternatives. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, `SelectionSlider` and `Select` only allow one selection. `SelectionRangeSlider` returns exactly two selections.\n",
    "\n",
    "Every widget, except the sliders, can return `Nothing` as it selected index."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "{-# LANGUAGE OverloadedStrings #-}\n",
    "{-# LANGUAGE FlexibleContexts #-}\n",
    "import IHaskell.Display.Widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": []
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "-- Allows single selection\n",
    "tgbs <- mkToggleButtons\n",
    "dropdown <- mkDropdown\n",
    "radio <- mkRadioButtons\n",
    "select <- mkSelect\n",
    "slider <- mkSelectionSlider\n",
    "\n",
    "-- Allows multiple selections\n",
    "msel <- mkSelectMultiple\n",
    "rslider <- mkSelectionRangeSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Single Selection Widgets\n",
    "\n",
    "We can set the options setting the `OptionsLabels` field, which is an array of Text. Let's see how can we select one of two functions with multiple selectors:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3abd4c34-c04f-4f59-b20c-a25206aa6a93",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c436f5dc-68b8-4265-b7fe-3cde44221ab5",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c9292a02-4ba3-435c-8202-92581524ba8d",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "579036b8-e825-4cfb-9c81-da728601c099",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4a4f263e-f56a-4af1-88db-b97510e941b2",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "init w = do\n",
    "    setField @Description w \"Function:\"\n",
    "    setField @OptionsLabels w [\"sin\", \"cos\"]\n",
    "    return w\n",
    "    \n",
    "init tgbs\n",
    "init dropdown\n",
    "init radio\n",
    "init select\n",
    "init slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can create a `SelectionHandler` function that will be run every time the value is changed. Let's synchronize them so all the selectors always display the same value."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "setHandlerOpt w = setField @SelectionHandler w $ do\n",
    "    y <- getField @OptionalIndex w\n",
    "    case y of\n",
    "        Just x -> do\n",
    "            setField @OptionalIndex dropdown $ Just x\n",
    "            setField @OptionalIndex tgbs $ Just x\n",
    "            setField @OptionalIndex radio $ Just x\n",
    "            setField @OptionalIndex select $ Just x\n",
    "            setField @Index slider x\n",
    "        _ -> return ()\n",
    "        \n",
    "setHandler w = setField @SelectionHandler w $ do\n",
    "    x <- getField @Index w\n",
    "    setField @OptionalIndex dropdown $ Just x\n",
    "    setField @OptionalIndex tgbs $ Just x\n",
    "    setField @OptionalIndex radio $ Just x\n",
    "    setField @OptionalIndex select $ Just x\n",
    "    setField @Index slider x\n",
    "        \n",
    "\n",
    "setHandlerOpt tgbs\n",
    "setHandlerOpt dropdown\n",
    "setHandlerOpt radio\n",
    "setHandlerOpt select\n",
    "setHandler slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, if you click in any of the widgets, the value on all the other widgets should change too.\n",
    "\n",
    "### Multiple Selection Widgets\n",
    "\n",
    "In the multiple selection widget, you can select multiple items by doing Shift+Click. Let's do an example for selecting provinces (maybe for filtering later)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ebad2164-fc83-4aad-813d-ea44eae2338d",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "msel <- mkSelectMultiple\n",
    "ccaa = \n",
    "    [ \"Andalusia\", \"Aragon\", \"Asturias\", \"Balearic Islands\", \"Basque Country\"\n",
    "    , \"Canary Islands\", \"Cantabria\", \"Castile and León\", \"Castilla-La Mancha\", \"Catalonia\"\n",
    "    , \"Madrid\", \"Extremadura\", \"Galicia\", \"La Rioja\", \"Navarre\", \"Murcia\", \"Valencia\"\n",
    "    ]\n",
    "    \n",
    "setField @OptionsLabels msel ccaa\n",
    "msel"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can also set the items selected with the `Indices` attribute (which is an Integer list)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @Indices msel [0,2]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "But we have to scroll a lot because we don't have enough space, which is a bit tiring. To fix this we can set a bigger number in the `Rows` attribute. This attribute tells the frontend how many rows we want to display. If we set it to `Nothing`, we are letting the frontend decide the number of rows."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @Rows msel $ Just 10"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's create a slider. This one also returns an array of `Indices`, but it's always of size 2."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2fe820d9-9fb7-492a-b126-410c8533098b",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "setField @OptionsLabels rslider [\"Very bad\", \"Bad\", \"Regular\", \"Good\", \"Very good\"]\n",
    "rslider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As expected, we can get/set the selected values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[0,0]"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "getField @Indices rslider\n",
    "setField @Indices rslider [1,3]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Haskell",
   "language": "haskell",
   "name": "haskell"
  },
  "language_info": {
   "codemirror_mode": "ihaskell",
   "file_extension": ".hs",
   "mimetype": "text/x-haskell",
   "name": "haskell",
   "pygments_lexer": "Haskell",
   "version": "9.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
